<template>
  <div class="row_container">
    <el-row :gutter="1" class="el-row_container">
      <el-col :span="3" class="left_span">
        <p>筛选关键词</p>
      </el-col>
      <el-col :span="14" style="padding-left: 30px; padding-top: 4px">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
          effect="dark"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
          v-show="flag"
          >+ New Tag</el-button
        >
      </el-col>
      <el-col :span="3" :offset="4">
        <input type="submit" value="筛选" @click="passOnComputed" />
      </el-col>
      <el-col :span="4" class="set_price">
        <input
          type="number"
          onkeyup="this.value=this.value.replace(/\D/g,'')"
          placeholder="最低价"
          v-model="lowPrice"
        />
        <p>—</p>
        <input
          type="number"
          onkeyup="this.value=this.value.replace(/\D/g,'')"
          placeholder="最高价"
          v-model="highPrice"
         @blur="check()"
        />
        <label class="label">元</label>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pubsub from "pubsub-js";
export default {
  name: "IssueShowFilterBox",
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      datas: "",
      key1: "",
      key2: "",
      key3: "",
      key4: "",
      product: [],
      flag: true,
      lowPrice: "",
      highPrice: "",
    };
  },
  watch: {
    dynamicTags: {
      handler() {
        if (this.dynamicTags.length == 1) {
          this.key1 = this.dynamicTags[0];
        } else if (this.dynamicTags.length == 2) {
          this.key1 = this.dynamicTags[0];
          this.key2 = this.dynamicTags[1];
        } else if (this.dynamicTags.length == 3) {
          this.key1 = this.dynamicTags[0];
          this.key2 = this.dynamicTags[1];
          this.key3 = this.dynamicTags[2];
        } else if (this.dynamicTags.length == 4) {
          this.key1 = this.dynamicTags[0];
          this.key2 = this.dynamicTags[1];
          this.key3 = this.dynamicTags[2];
          this.key4 = this.dynamicTags[3];
        }
        this.$axios
          .get(
            `/api/product/getProductByMoreKeywords?k1=${this.key1}&k2=${this.key2}&k3=${this.key3}&k4=${this.key4}`
          )
          .then((res) => {
            this.product = res.data.results;
            pubsub.publish("productobj", this.product);
          });
        if (this.dynamicTags.length >= 4) {
          this.flag = false;
        } else {
          this.flag = true;
        }
        this.key1 = "";
        this.key2 = "";
        this.key3 = "";
        this.key4 = "";
      },
    },
  },
  methods: {
    check(){
      if(parseInt(this.highPrice) <= parseInt(this.lowPrice)){
         this.$notify({
          title: '提示',
          message: '最高价不能低于最低价'
        });
        this.highPrice =""
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (this.dynamicTags.indexOf(inputValue) == -1) {
          this.dynamicTags.push(inputValue);
        } else {
          alert("请勿重复添加");
        }
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    passOnComputed() {
      pubsub.publish("productPrice", { p1: this.lowPrice, p2: this.highPrice });
    },
  },
};
</script>
<style>
.el-row .el-col:nth-child(4){
  padding-top: 5px;
}
.el-row .el-col:nth-child(2){
  padding-bottom: 2px;
}
.el-row_container{
  background-color: #e7eaed;
  border-radius:5px;
}
.el-row_container:hover{
  background-color: #ccc;
}
[type="number"] {
  text-align: center;
}
.label {
  margin-top: 6px;
  color: #313d45;
}
.set_price {
  display: flex;
}
[type="submit"] {
  margin-left: 30px;
  outline: 0;
  color: #f9fafc;
  font-weight: bold;
  text-shadow: 1px 1px #1f272b;
  border: 1px solid #1c252b;
  border-radius: 3px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(3%, #3d4850),
    color-stop(4%, #313d45),
    color-stop(100%, #232b30)
  );
  box-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}

[type="number"],
[type="submit"] {
  width: 60px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}
.left_span {
  font-size: 18px;
  line-height: 40px;
  text-align: left;
}
.left_span p {
  margin: 2px;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 40px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.set_price p {
  margin-top: 6px;
}
</style>